<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>科泰聊天室</title>
  <link href="css/chat.css" rel="stylesheet">
</head>
<body>
  <!-- 根组件（父组件） --> 
  <div id="app">
    <h1 class="title center">科泰聊天室</h1>
    <div class="chat-window center">
      <!-- 消息展示区域组件（子组件） -->
      <chat-messages-component :messages="chatMessages"></chat-messages-component>
      <!-- 输入发送区域组件（子组件） -->
      <chat-input-component @send-message="handleSendMessage"></chat-input-component>
    </div>
  </div>
  <script src="js/vue.js"></script>
  <script src="https://unpkg.com/axios@1.6.7/dist/axios.min.js"></script>
  <script>
    // 定义消息展示组件（子组件）
    Vue.component('chat-messages-component', {
      props: ['messages'],
      template: `
        <div class="chat-messages">
          <div v-for="(message, index) in messages" :key="index" class="message" :class="message.type === 'received'? 'received-message' : 'sent-message'">
            <div class="message-received" v-if="message.type === 'received'"><img :src="message.avatar" class="avatar"> <span class="message-content">{{ message.content }}</span></div>
            <div class="message-sent" v-else><span class="message-content">{{ message.content }}</span> <img :src="message.avatar" class="avatar"></div>
          </div>
        </div>
      `
    });
    // 定义输入发送组件（子组件）
    Vue.component('chat-input-component', {
      template: `
        <div class="chat-input">
          <input type="text" placeholder="请输入消息..." v-model="newMessage">
          <button @click="sendMessage">发送</button>
        </div>
      `,
      data() {
        return {
          newMessage: ''
        };
      },
      methods: {
        sendMessage() {
          this.$emit('send-message', this.newMessage);
          this.newMessage = '';
        }
      }
    });
    // 创建根实例（父组件实例化）
    new Vue({
      el: '#app',
      data() {
        return {
          chatMessages: []
        };
      },
      mounted() {
        // 使用Axios发起请求获取聊天记录数据
        axios.get('data/chat-history.json')
        .then(response => {
            // 将获取到的数据赋值给chatMessages，用于展示聊天记录
            this.chatMessages = response.data;
          })
        .catch(error => {
            console.error('获取聊天记录数据出错：', error);
          });
      },
      methods: {
        handleSendMessage(message) {
          // 这里可以添加更多逻辑，比如将消息发送到服务器等，目前只是简单添加到本地数据列表
          this.chatMessages.push({
            type: "sent",
            avatar: "images/avt-02.png",
            content: message
          });
        }
      }
    });
  </script>
</body>
</html>